/*基金页 path: '/fundmain'*/
<template>
  <div id="fund-main" class="fund-main common-fun-trade">
    <header-account-top :tab="1"></header-account-top>
    <div class="fund-top-blank"></div>
    <div class="fund-main-overview">
      <div class="fund-total-note">开放式基金市值(元）</div>
      <div class="fund-total-balance"><span>¥</span>{{fundAssest}}</div>
      <div class="to-selfaccount" @click.stop.prevent="toSelfAccount">个人账户总览</div><div class="to-fundbase" @click.stop.prevent="toFundBase">基金基础<i class="iconfont icon-xiangyou"></i></div>
    </div>
    <img src="~assets/images/trade/niu@2x.png" class="fund-niu">
    <img src="~assets/images/trade/monijiaoyi.png" class="fund-shuiyin">
    <div class="fund-menu">
      <div v-for="(item,index) in menus" class="fund-menu-item"  :class="{'xie':item.name==0}" @click.stop.prevent="clickMenu(item,index)">
        <div class="fund-menu-img" :style="{'background-image':'url('+item.imgUrl+')'}"></div>
        <div class="fund-menu-name">{{item.name}}</div>
      </div>
    </div>
    <div class="fund-to-real" @click.stop.prevent="toReal">
      <div class="content">跳转真实账户<i class="iconfont icon-xiangyou"></i></div>
    </div>
    <trade-to-real-modal></trade-to-real-modal>
    <fund-need-know-modal></fund-need-know-modal>
  </div>
</template>

<script>
  import Constant from 'common/constant'
  import LocalDAO from 'common/localDAO'
  import RemoteDAO from 'common/remoteDAO'
  import CommonUtil from 'common/common.util'
  import HeaderAccountTop from 'components/selfaccount/HeaderAccountTop'
  import TradeToRealModal from 'components/modal/TradeToRealModal'
  import FundNeedKnowModal from 'components/modal/fund/FundNeedKnowModal'

  export default {
    data () {
      return {
        menus:[
          {imgUrl:require('assets/images/trade/jijinchaxun@2x.png'),name:'基金查询',path:'gtjanrng://fundsearch'},
          {imgUrl:require('assets/images/trade/jijingoumai@2x.png'),name:'基金购买',path:'/fundbuy'},
          {imgUrl:require('assets/images/trade/jijinshuhui@2x.png'),name:'基金赎回',path:'/fundredeem'},
          {imgUrl:require('assets/images/trade/jijinchicang@2x.png'),name:'基金持仓',path:'/fundposition'},
          {imgUrl:require('assets/images/trade/weituochaxun@2x.png'),name:'委托查询',path:'/fundentrust'},
          {imgUrl:require('assets/images/trade/lishichengjiao@2x.png'),name:'历史成交',path:'/fundhistory'},
          {imgUrl:'',name:0,path:''},
          {imgUrl:require('assets/images/trade/fenhongfangshi@2x.png'),name:'分红方式',path:'/funddivide'},
          {imgUrl:'',name:0,path:''}
        ],
        userCode:LocalDAO.getUserCode(),
        fundAssest:'--',
        test:'test'
      }
    },
    components: {
      HeaderAccountTop,
      TradeToRealModal,
      FundNeedKnowModal
    },
    created:function(){
      this.fetchData();
    },
    mounted:function(){
      let height = this.$store.state.htmlHeight;
      if(!height){
      	height = document.documentElement.getBoundingClientRect().height || 667
      	this.$store.dispatch('setHtmlHeight',height)
      }
      let rem = height/6.67; //iphone6下,1px=100rem,其它屏幕根据高度按比例伸缩
      document.documentElement.style.fontSize = rem +'px';
      if(CommonUtil.isEmpty(LocalDAO.getFundNeedKnow())){
        this.$store.dispatch('setModal',{visible:true,modalId:Constant.modal.FUND_NEED_KNOW_MODAL});
        LocalDAO.setFundNeedKnow(true)
      }
    },
    destroyed:function(){
      let html = document.documentElement;
      html.style.fontSize = '';
    },
    methods:{
      fetchData(){
        //获取开放式基金总资产
        RemoteDAO.callJCL11170(this.userCode,response =>{
          this.test = JSON.stringify(response)
          if (response.error == 0) {
            this.fundAssest = CommonUtil.toFixed(response.data.body.fund_assest,2)
          }else{
          this.$store.dispatch('setTip',{time: 2200,text:'基金市值查询失败：'+response.data});
          }
        })
      },
      clickMenu(item,index){
        if(index == 0){
          window.location.href = item.path;
        }else if(item.path){
          this.$router.push({path:item.path})
        }
        let eventId = ''
        switch (item.name) {
          case '基金查询' : eventId = '21003'; break;
          case '基金购买' : eventId = '21004'; break;
          case '基金赎回' : eventId = '21005'; break;
          case '基金持仓' : eventId = '21006'; break;
          case '委托查询' : eventId = '21008'; break;
          case '历史成交' : eventId = '21011'; break;
          case '分红方式' : eventId = '21012'; break;
        }
        if(eventId !== '') {
          this.maidian(eventId)
        }
      },
      toReal(){
        this.maidian("21013")
        this.$store.dispatch('setModal', { visible: true, modalId: 'tradeToRealModal', stockCode: '', marketCd:'', tradeType: 'fund' })
      },
      toSelfAccount(){
        this.maidian("21001")
        this.$router.push({path:'/selfaccount'})
      },
      toFundBase(){
        this.maidian("21002")
        this.$router.push({path:'/fundbase'})
      },
      maidian (eventId) {
        let kv = {"usercode":this.userCode}
        TDAPP.onEvent(eventId,"",kv)
        TDAPP.send()
      }
    }
  }
</script>

<style scoped>
  .fund-main{
    width: 100%;
    height: 100%;
    background: #FFFFFF;
  }
  .fund-top-blank{
    background: #3F78E1;
    width: 100%;
    height: 44px;
    position: fixed;
    top:0
  }
  .fund-main-overview{
    width:100%;
    background: #3F78E1;
    display: inline-block;
    height: 1.97rem;
  }
  .fund-main-overview div{
    color:#FFFFFF;
    text-align: center;
  }
  .fund-main-overview .fund-total-note{
    font-size: 0.14rem;
    margin:0.48rem 0 0.05rem;
  }
  .fund-main-overview .fund-total-balance{
    width:80%;
    height:0.30rem;
    line-height: 0.30rem;
    margin: 0 auto 0.30rem;
    font-size: 0.30rem;
    font-weight: bold;
    color:#FFFF9E
  }
  .fund-main-overview .fund-total-balance span{
    font-size: 0.20rem;
    margin-right: 0.09rem;
    vertical-align: top;
    font-weight: normal;
  }
  .fund-main-overview .to-selfaccount{
    width:1.12rem;
    height:0.29rem;
    line-height: 0.27rem;
    font-size: 0.12rem;
    border: 0.01rem solid #FFFFFF;
    background-color: RGBA(205,238,255,0.15);
    border-radius: 0.14rem;
    margin-left: 5.066%;
    float: left;
  }
  .fund-main-overview .to-fundbase{
    display: inline-block;
    color:#C4EFFF;
    width:1.12rem;
    height:0.29rem;
    font-size: 0.13rem;
    line-height: 0.27rem;
    float: right;
  }
  .fund-menu{
    display: inline-block;
    width: 86.4%;
    margin: 0.50rem 6.8% 0;
    /*border-radius: 10rem;*/
    /*border: 1rem solid #dedede;*/
    /*box-shadow: 0 0 10rem rgba(67, 162, 229, 0.61);*/
    background: #FFFFFF;
  }
  .fund-menu .fund-menu-item{
    width:33%;
    height:1.00rem;
    display: inline-block;
    text-align: center;
    font-size: 0.12rem;
    color: #6b6b6b;
  }
  .fund-menu .fund-menu-item.xie{
    background-image: url('~assets/images/trade/weishiyong.png');
    background-repeat: repeat-x;
    background-size:cover;
    color: #FFFFFF;
  }
  .fund-menu .fund-menu-item .fund-menu-img{
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40%;
    width: 100%;
    height: 0.70rem;
  }
  .fund-menu .fund-menu-item:nth-child(1) .fund-menu-img{
    background-size: 50%;
  }
  .fund-menu .fund-menu-item:nth-child(2) .fund-menu-img{
    background-size: 48%;
  }
  .fund-menu .fund-menu-item:nth-child(6) .fund-menu-img{
    background-size: 58%;
    background-position: top;
  }
  .fund-menu .fund-menu-item:nth-child(2),.fund-menu .fund-menu-item:nth-child(8){
    border-left: 0.01rem solid rgba(209, 222, 235, 0.45);
    border-right: 0.01rem solid rgba(209, 222, 235, 0.45);
  }
  .fund-menu .fund-menu-item:nth-child(4),.fund-menu .fund-menu-item:nth-child(6){
    border-top: 0.01rem solid rgba(209, 222, 235, 0.45);
    border-bottom: 0.01rem solid rgba(209, 222, 235, 0.45);
  }
  .fund-menu .fund-menu-item:nth-child(5){
    border: 0.01rem solid rgba(209, 222, 235, 0.45);
  }
  .fund-to-real{
    width: 100%;
    text-align: center;
    font-size: 0.12rem;
    color:#3D90CD;
    padding: 0.28rem 0 0.26rem;
    background: #FFFFFF;
  }
  .fund-to-real .content{
    display: inline-block;
  }
  .fund-niu{
    position: absolute;
    top:0.60rem;
    left:0;
    width: 20.5333%;
  }
  .fund-shuiyin{
    position: fixed;
    top:19px;
    right:0;
  }
  @media (min-height: 680px) {
    .fund-to-real{
      padding: 0.28rem 0 0.33rem;
    }
  }

</style>
